<!-- Role.vue -->
<script setup lang="ts">
import { MoreFilled, User } from "@element-plus/icons-vue"
import { ref } from "vue"
import { getRoleDetailAPI, getRoleListAPI, getRoleUserAPI, getTreeListAPI } from "@/pages/system/user/apis"

interface RoleItem {
  roleId: number
  roleName: string
}

const roleList = ref<RoleItem[]>([
])
const treeList = ref([])
async function getTreeList() {
  const res = await getTreeListAPI()
  treeList.value = res.data
  addDisabled(treeList.value)
}
async function getRoleList() {
  const res = await getRoleListAPI()
  roleList.value = res.data.rows
  roleList.value = [
    { roleId: 1, roleName: "超级管理员" },
    { roleId: 2, roleName: "管理员" },
    { roleId: 3, roleName: "普通用户" }
  ]
}
function addDisabled(treeList) {
  treeList.forEach((item) => {
    item.disabled = true
    // 递归处理
    if (item.children) {
      addDisabled(item.children)
    }
  })
}
onMounted(() => {
  getRoleList()
  getTreeList()
})
/* 当前选中角色 */
const roleUserList = ref([])
const total = ref(0)
async function getRoleUserList(roleId) {
  const res = await getRoleUserAPI(roleId)
  roleUserList.value = res.data.rows
  total.value = res.data.total
}
const activeRoleId = ref<number | null>(null)
const permissionList = ref<number[]>([])
const treeRef = ref<HTMLElement | null>(null)
watch(activeRoleId, async (newVal) => {
  if (!newVal) return
  await getRoleUserList(newVal)
  const res = await getRoleDetailAPI(newVal)
  // 1️⃣ 拍平二维数组
  permissionList.value = (res.data.perms || []).flat().map(Number)

  // 2️⃣ 等待树渲染后执行
  nextTick(() => {
    if (Array.isArray(treeRef.value)) {
      // 有多个 el-tree
      treeRef.value.forEach((tree) => {
        tree.setCheckedKeys([])
        tree.setCheckedKeys(permissionList.value)
      })
    } else if (treeRef.value) {
      // 只有一个 el-tree
      treeRef.value.setCheckedKeys([])
      treeRef.value.setCheckedKeys(permissionList.value)
    }
  })
})
</script>

<template>
  <div class="role-container">
    <div class="left-wrapper">
      <!-- 角色列表 -->
      <div
        v-for="item in roleList"
        :key="item.roleId"
        class="role-item"
        :class="{ active: activeRoleId === item.roleId }"
        @click="activeRoleId = item.roleId"
      >
        <div class="role-info">
          <el-icon class="icon">
            <User />
          </el-icon>
          {{ item.roleName }}
        </div>
        <div class="more">
          <el-icon><MoreFilled /></el-icon>
        </div>
      </div>

      <el-button class="addBtn" size="mini">
        添加角色
      </el-button>
    </div>

    <!-- 右侧占位，后续可扩展 -->

    <el-tabs class="right-wrapper">
      <el-tab-pane label="权限管理" name="tree" style="display: flex;">
        <div v-for="item in treeList" :key="item.id" class="tree-item">
          <div class="tree-title">
            {{ item.title }}
          </div>
          <el-tree
            ref="treeRef"
            :props="{ label: 'title', children: 'children' }"
            :data="item.children"
            node-key="id"
            show-checkbox
            :default-expand-all="true"
            :default-checked-keys="permissionList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`成员(${total})`" name="user">
        <div class="user-wrapper">
          <el-table
            :data="roleUserList"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="250"
              label="序号"
            />
            <el-table-column
              prop="name"
              label="员工姓名"
            />
            <el-table-column
              prop="userName"
              label="登录账号"
            />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.role-container {
  display: flex;
  font-size: 14px;
  padding: 20px;

  .left-wrapper {
    width: 200px;
    border-right: 1px solid #e4e7ec;
    padding: 4px;
    text-align: center;

    .role-item {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.2s;

      &:hover {
        background: #f5f7fa;
      }

      &.active {
        background: #edf5ff;
        color: #4770ff;
      }
    }

    .role-info {
      display: flex;
      align-items: center;
      .icon {
        margin-right: 10px;
      }
    }

    .more {
      display: flex;
      align-items: center;
      color: #909399;
    }

    .addBtn {
      width: 100%;
      margin-top: 20px;
    }
  }

  .right-wrapper {
    width: calc(100% - 200px);
    display: flex;
    /* 后续再放 tabs / tree / table 等 */
    .tree-item {
      margin-right: 20px;
    }
  }
}
</style>
